Creating Outlines
Description
Outlines are an alternative to borders.
The outlines are not considered to be part of the page, and so do not cause the page layout to be adjusted when you apply them.
The following list describes the elements that relate to outlines.
- outline-color
Sets the color out the outline.
Value: color - outline-offset
Sets the offset of the outline.
Value:length - outline-style
Sets the style of the outline.
This value is the same as for the border-style property. - outline-width
Sets the width of the outline.
Value:thin or medium or thick or length - outline
Shorthand property sets the outline in a single declaration.
Value: color style width
Example
The following code shows the application of an outline.
<!DOCTYPE HTML>
<html>
<head>
<style>
p {<!-- ww w . j a v a2 s. c om-->
width: 30%;
padding: 5px;
border: medium double black;
background-color: lightgray;
margin: 2px;
float: left;
}
#mytext {
outline: thick solid red;
}
</style>
</head>
<body>
<p>This is a test.</p>
<p id="mytext">This is a test.</p>
<p>This is a test.</p>
<button>Outline Off</button>
<button>Outline On</button>
<script>
var buttons = document.getElementsByTagName("BUTTON");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
var elem = document.getElementById("mytext");
if (e.target.innerHTML == "Outline Off") {
elem.style.outline = "none";
} else {
elem.style.outlineColor = "red";
elem.style.outlineStyle = "solid";
elem.style.outlineWidth = "thick";
}
};
}
</script>
</body>
</html>